<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button type="primary" @click="refresh">刷新</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="名称" align="left" width="180">
                    <template slot-scope="scope">
                        <div @click="handleRow(scope.$index, scope.row)">
                            <span class="space" v-for="i in scope.row.top" :key="i"></span>
                            <i
                                :class="{
                                    'el-icon-caret-right': !scope.row.show,
                                    'el-icon-caret-bottom': scope.row.show
                                }"
                                v-if="scope.row.permissions && scope.row.permissions.length"
                            ></i>
                            <span class="arrow-width" v-else></span>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="图标">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>

                <el-table-column label="类型" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.type === '菜单' ? 'success' : scope.row.type === '按钮' ? 'danger' : ''">{{
                            scope.row.type
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="orderNum" align="center" label="排序"> </el-table-column>
                <el-table-column prop="resource" align="center" label="路由"> </el-table-column>
                <el-table-column prop="" align="center" :show-overflow-tooltip="true" label="授权标识"> </el-table-column>

                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
                            <!-- 编辑 -->
                            {{ $t('m.editBtn') }}
                        </el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 新增弹出框 0=>菜单 1=>按钮 -->
        <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="addVisible" width="50%">
            <el-form ref="addForm" :model="addForm" label-width="auto" :rules="rules">
                <el-form-item label="类型">
                    <template>
                        <el-radio-group v-model="addForm.type" @change="singleChange">
                            <el-radio :label="0">菜单</el-radio>
                            <el-radio :label="1">按钮</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>

                <el-form-item label="名称" prop="name" v-if="addForm.type === 0">
                    <el-input v-model="addForm.name" placeholder="名称" clearable></el-input>
                </el-form-item>

                <el-form-item label="名称" prop="name" v-if="addForm.type === 1">
                    <el-input v-model="addForm.name" placeholder="名称" clearable></el-input>
                </el-form-item>

                <el-form-item label="上级菜单" prop="parentName" v-if="addForm.type === 0">
                    <div class="block">
                        <el-cascader
                            :options="addForm.options"
                            :key="keyValue"
                            :placeholder="'请选择上级菜单'"
                            clearable
                            :props="{ multiple: false, checkStrictly: true, value: 'id', label: 'label', children: 'permissions' }"
                            @change="valueChange"
                            :disabled="optionsChanged"
                            ref="cascader"
                            v-model="deptvalue"
                        >
                            <template slot-scope="{ node, data }">
                                <span>{{ data.label }}</span>
                                <span v-if="!node.isLeaf"> ({{ data.permissions.length }}) </span>
                            </template>
                        </el-cascader>
                    </div>
                </el-form-item>

                <el-form-item label="上级菜单" prop="parentName" v-if="addForm.type === 1">
                    <div class="block">
                        <el-cascader
                            :options="addForm.options"
                            :key="keyValue"
                            :props="{ multiple: false, checkStrictly: true, value: 'id', label: 'label', children: 'permissions' }"
                            clearable
                            @change="valueChange"
                            :disabled="optionsChanged"
                            ref="cascader"
                            v-model="deptvalue"
                        ></el-cascader>
                    </div>
                </el-form-item>

                <el-form-item label="路由" prop="resource" v-if="addForm.type === 0">
                    <el-input placeholder="路由" v-model="addForm.resource" clearable></el-input>
                </el-form-item>

                <el-form-item label="排序" v-if="addForm.type === 0">
                    <template>
                        <el-input-number
                            v-model="addForm.orderNum"
                            @change="handleChange"
                            :min="0"
                            :max="Infinity"
                            label="描述文字"
                        ></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="排序" v-if="addForm.type === 1">
                    <template>
                        <el-input-number
                            v-model="addForm.orderNum"
                            @change="handleChange"
                            :min="0"
                            :max="Infinity"
                            label="描述文字"
                        ></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="授权标识" prop="" v-if="addForm.type === 0">
                    <!-- v-model="addForm.permissions" -->
                    <el-input placeholder="多个用逗号隔开, 如: sys:menu:save,sys:menu:update" clearable></el-input>
                </el-form-item>

                <el-form-item label="授权标识" prop="" v-if="addForm.type === 1">
                    <!-- v-model="addForm.permissions" -->
                    <el-input placeholder="多个用逗号隔开, 如: sys:menu:save,sys:menu:update" clearable></el-input>
                </el-form-item>

                <el-form-item label="图标" prop="icon" v-if="addForm.type === 0">
                    <template>
                        <el-select style="width: 195px;" v-model="addForm.value" placeholder="图标">
                            <el-option v-for="(item, index) in addForm.icons" :key="index" :label="addForm.icon" :value="addForm.icon">
                                <span
                                    v-for="(icon, index) in item"
                                    :key="index"
                                    @click="selectIcon(icon)"
                                    :style="{ margin: '0 2px 2px 2px' }"
                                >
                                    <el-button type="default" size="mini" circle :icon="icon"></el-button>
                                </span>
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 0 => 菜单  1 => 按钮-->
        <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="editVisible" width="50%">
            <el-form ref="editForm" :model="editForm" label-width="auto">
                <el-form-item label="类型">
                    <template>
                        <el-radio-group v-model="editForm.type" @change="singleChange">
                            <el-radio disabled :label="0">菜单</el-radio>
                            <el-radio disabled :label="1">按钮</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="名称" prop="name" v-if="editForm.type === 0">
                    <el-input v-model="editForm.name" placeholder="名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parentName" v-if="editForm.type == 0">
                    <div class="block">
                        <el-cascader
                            :options="editForm.options"
                            :props="{ multiple: false, checkStrictly: true, value: 'id', label: 'label', children: 'permissions' }"
                            clearable
                            @change="valueChange"
                            :disabled="optionsChanged"
                            :key="isResouceShow"
                            ref="cascader"
                            v-model="deptvalue"
                        ></el-cascader>
                    </div>
                </el-form-item>

                <el-form-item label="上级菜单" prop="parentName" v-if="editForm.type === 1">
                    <div class="block">
                        <el-cascader
                            :options="editForm.options"
                            :props="{ multiple: false, checkStrictly: true, value: 'id', label: 'label', children: 'permissions' }"
                            clearable
                            @change="valueChange"
                            :disabled="optionsChanged"
                            :key="isResouceShow"
                            ref="cascader"
                            v-model="deptvalue"
                        ></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="路由" prop="resource" v-if="editForm.type === 0">
                    <el-input v-model="editForm.resource" placeholder="路由" clearable></el-input>
                </el-form-item>

                <el-form-item label="排序" v-if="editForm.type === 0">
                    <template>
                        <el-input-number
                            v-model="editForm.orderNum"
                            @change="handleChange"
                            :min="0"
                            :max="Infinity"
                            label="描述文字"
                        ></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="排序" v-if="editForm.type === 1">
                    <template>
                        <el-input-number
                            v-model="editForm.orderNum"
                            @change="handleChange"
                            :min="0"
                            :max="Infinity"
                            label="描述文字"
                        ></el-input-number>
                    </template>
                </el-form-item>

                <el-form-item label="图标" prop="icon" v-if="addForm.type === 0">
                    <template>
                        <el-select style="width: 195px;" v-model="editForm.icon" placeholder="图标">
                            <el-option v-for="(item, index) in icons" :key="index" :label="editForm.icon" :value="editForm.icon">
                                <span
                                    v-for="(icon, index) in item"
                                    :key="index"
                                    @click="selectIcon(icon)"
                                    :style="{ margin: '0 2px 2px 2px' }"
                                >
                                    <el-button type="default" size="mini" circle :icon="icon"></el-button>
                                </span>
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

                <el-form-item label="授权标识" prop="" v-if="editForm.type === 0">
                    <!-- v-model="editForm.permissions" -->
                    <el-input placeholder="多个用逗号隔开, 如: sys:menu:save,sys:menu:update" clearable></el-input>
                </el-form-item>

                <el-form-item label="授权标识" prop="" v-if="editForm.type === 1">
                    <!-- v-model="editForm.permissions" -->
                    <el-input placeholder="多个用逗号隔开, 如: sys:menu:save,sys:menu:update" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import icons from './icons.js';
export default {
    name: 'MenuManage',
    data() {
        return {
            smPermissions: [],
            icons: icons,
            keyValue: 0,
            options: [
                {
                    value: '',
                    label: ''
                }
            ],
            editVisible: false,
            addVisible: false,
            rules: {
                name: [{ required: true, message: '必填不能为空', trigger: 'blur' }],
                parentName: [{ required: false, message: '必填不能为空', trigger: 'blur' }]
            },
            editForm: {
                id: '',
                permissions: [],
                name: '',
                resource: '',
                type: 0,
                icon: '',
                orderNum: 0,
                createTime: '',
                parentName: '',
                options: [],
                title: '',
                parentId: 0,
                description: '',
                status: 1,
                top: 0
            },
            addForm: {
                id: '',
                permissions: [],
                name: '',
                resource: '',
                type: 0,
                icon: '',
                orderNum: 0,
                createTime: '',
                parentName: '',
                options: [],
                value: '',
                icons: icons,
                title: '',
                parentId: 0,
                description: '',
                status: 1,
                top: 0
            },
            form: {
                name: ''
            },
            tableData: [
                {
                    id: '',
                    permissions: [],
                    name: '',
                    resource: '',
                    type: 0,
                    icon: '',
                    orderNum: 0,
                    createTime: '',
                    parentName: '',
                    parentId: 0,
                    top: 0,
                    status: 1
                }
            ],
            optionsChanged: false,
            isResouceShow: 0,
            deptvalue: 0,
            permissions: []
        };
    },
    computed: {
        watchOption() {
            return this.addForm.options;
        }
    },
    watch: {
        deptvalue() {
            if (this.$refs.cascader) {
                this.$refs.cascader.dropDownVisible = false;
            }
        },
        watchOption(newVal) {
            this.keyValue++;
        },
        permissions: function(newVal, oldVal) {
            this.smPermissions = newVal;
        }
    },
    activated() {
        this.getMenuData();
    },
    methods: {
        getOneArray(twoArray) {
            var tempArr = [];
            if (twoArray && twoArray.length && twoArray.length > 0) {
                twoArray = Array.from(twoArray);
                twoArray.map(arr => {
                    arr = arr || [];
                    arr = Array.from(arr);
                    tempArr.push(arr[arr.length - 1]);
                });
            }
            return [...new Set(tempArr)];
        },
        selectIcon(icon) {
            console.log(icon);
            this.options[0].label = icon;
            this.options[0].value = icon;
            this.addForm.icon = icon;
            this.editForm.icon = icon;
        },
        async getMenuData() {
            try {
                let url = '/menu/query';
                let { data: res } = await this.$http[4].get(url, {
                    params: this.$removeField({
                        serviceId: localStorage.getItem('code')
                    })
                });
                console.log('菜单管理列表：', res);

                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                function myMap(array) {
                    array.map(item => {
                        item.show = false;
                        if (item.permissions && item.permissions.length) {
                            return myMap(item.permissions);
                        }
                    });
                }
                myMap(res.data);

                function handleType(array) {
                    array.map(item => {
                        item.type = item.type === 0 ? '按钮' : '菜单';
                        if (item.permissions && item.permissions.length) {
                            return handleType(item.permissions);
                        }
                    });
                }
                handleType(res.data);
                this.tableData = res.data;
                this.tableData.map(item => {
                    item.show = false;
                    item.top = 0;
                    if (item.permissions && item.permissions.length) {
                        item.permissions.map(subItem => {
                            subItem.show = false;
                            subItem.top = 1;
                            if (subItem.permissions && subItem.permissions.length) {
                                subItem.permissions.map(grandsonItem => {
                                    grandsonItem.show = false;
                                    grandsonItem.top = 2;
                                });
                            }
                        });
                    }
                });
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },
        handleChange(currentValue, oldValue) {
            if (this.addVisible) {
                this.addForm.orderNum = currentValue;
            } else if (this.editVisible) {
                this.editForm.orderNum = currentValue;
            }
        },
        async saveAdd() {
            try {
                let url = '/menu/post';
                console.log(this.deptvalue);
                let pid = !this.deptvalue
                    ? 0
                    : this.deptvalue instanceof Array
                    ? this.deptvalue[this.deptvalue.length - 1]
                    : this.deptvalue;
                console.log(pid);
                let val = this.$removeField({
                    name: this.addForm.name,
                    title: this.addForm.title,
                    parentId: pid,
                    resource: this.addForm.resource ? this.addForm.resource : '',
                    icon: this.addForm.icon,
                    orderNum: this.addForm.orderNum,
                    description: this.addForm.description,
                    status: this.addForm.status,
                    serviceId: localStorage.getItem('code')
                });
                let { data: res } = await this.$http[4].post(url, this.$objTostring(val), {
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
                console.log('菜单新增：', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }

                this.$message.success('ok');
                this.addVisible = false;
                this.addForm = {
                    id: '',
                    permissions: [],
                    name: '',
                    resource: '',
                    type: 0,
                    icon: '',
                    orderNum: 0,
                    createTime: '',
                    parentName: '',
                    options: [],
                    value: '',
                    icons: icons,
                    title: '',
                    parentId: 0,
                    description: '',
                    status: 1
                };
                this.getMenuData();
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },
        singleChange(value) {
            if (this.addVisible) {
                this.addForm.type = value;
            } else if (this.editVisible) {
                this.editForm.type = value;
            }
        },
        async initParaentMenu() {
            try {
                let url = '/menu/query';
                let { data: res } = await this.$http[4].get(url, {
                    params: this.$removeField({
                        serviceId: localStorage.getItem('code')
                    })
                });
                console.log('初始化上级菜单：', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }

                if (this.addVisible) {
                    this.addLabelAttribute(res.data);
                    for (var i = 0; i < res.data.length; i++) {
                        var {
                            createTime,
                            icon,
                            id,
                            label,
                            name,
                            parentName,
                            permissions,
                            parentId,
                            orderNum,
                            type,
                            resource,
                            value,
                            top,
                            status
                        } = res.data[i];
                        var tempObj = {
                            createTime,
                            icon,
                            id,
                            label,
                            name,
                            parentName,
                            parentId,
                            orderNum,
                            type,
                            resource,
                            value,
                            top,
                            status,
                            permissions: []
                        };

                        if (res.data[i].permissions && res.data[i].permissions.length) {
                            for (var j = 0; j < res.data[i].permissions.length; j++) {
                                var {
                                    createTime,
                                    icon,
                                    id,
                                    label,
                                    name,
                                    parentName,
                                    permissions,
                                    parentId,
                                    orderNum,
                                    type,
                                    resource,
                                    value,
                                    top,
                                    status
                                } = res.data[i].permissions[j];
                                tempObj.permissions.push({
                                    createTime,
                                    icon,
                                    id,
                                    label,
                                    name,
                                    parentName,
                                    permissions,
                                    parentId,
                                    orderNum,
                                    type,
                                    resource,
                                    value,
                                    top,
                                    status
                                });
                            }
                        }

                        this.addForm.options.push(tempObj);
                    }
                    console.log(this.addForm.options);
                } else if (this.editVisible) {
                    this.addLabelAttribute(res.data);
                    console.log(res.data);
                    // console.log(this.editForm.parentId)
                    this.editForm.options = res.data;
                    var idList = [];
                    this.editForm.options.map(item => {
                        if (item.id == this.editForm.parentId) {
                            idList.push(item.id);
                        } else {
                            if (item.permissions && item.permissions.length) {
                                item.permissions.map(item1 => {
                                    if (item1.id === this.editForm.parentId) {
                                        idList.push(item1.id);
                                    }
                                });
                            }
                        }
                    });
                    // console.log(idList)
                    this.deptvalue = idList[idList.length - 1];
                    // console.log(this.deptvalue)
                }
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },
        addLabelAttribute(arr) {
            for (var i = 0; i < arr.length; i++) {
                if ('permissions' in arr[i] && arr[i].permissions.length !== 0) {
                    arr[i].label = arr[i].name;
                    arr[i].value = arr[i].name;
                    this.addLabelAttribute(arr[i].permissions);
                } else if ('permissions' in arr[i] && arr[i].permissions.length === 0) {
                    arr[i].label = arr[i].name;
                    arr[i].value = arr[i].name;
                    delete arr[i].permissions;
                } else if (!('permissions' in arr[i])) {
                    arr[i].label = arr[i].name;
                    arr[i].value = arr[i].name;
                }
            }
        },
        handleAdd() {
            this.addVisible = true;
            this.addForm.options = [];
            this.deptvalue = 0;
            console.log('新增：', this.addForm.options);
            this.initParaentMenu();
        },
        refresh() {
            // window.location.reload();
            this.getMenuData();
        },
        async saveEdit() {
            try {
                console.log(this.editForm);
                let url = '/menu/update';
                let pid = !this.deptvalue
                    ? 0
                    : this.deptvalue instanceof Array
                    ? this.deptvalue[this.deptvalue.length - 1]
                    : this.deptvalue;
                // console.log(this.deptvalue)
                // console.log(pid)
                let val = this.$removeField({
                    name: this.editForm.name,
                    title: this.editForm.title,
                    permissionId: this.editForm.id,
                    parentId: pid,
                    resource: this.editForm.resource ? this.editForm.resource : '',
                    icon: this.editForm.icon,
                    orderNum: this.editForm.orderNum,
                    description: this.editForm.description,
                    status: this.editForm.status
                });
                let { data: res } = await this.$http[4].post(url, this.$objTostring(val), {
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
                console.log('初始化编辑菜单：', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                this.$message.success('ok');
                this.editVisible = false;
                this.getMenuData();
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },

        async initEditForm(id) {
            try {
                let url = '/menu/get';
                let { data: res } = await this.$http[4].get(url, {
                    params: this.$removeField({
                        permissionId: id
                    })
                });
                console.log('编辑表单数据：', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                for (var key in res.data) {
                    this.editForm[key] = res.data[key];
                }
                console.log(this.editForm);
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },
        handleEdit(index, row) {
            this.idx = index;
            this.editVisible = true;
            this.editForm = row;

            if (row.type === '按钮') {
                this.editForm.type = 1;
            } else {
                this.editForm.type = 0;
            }

            console.log('编辑：', this.editForm);
            this.initParaentMenu();
            this.initEditForm(row.id);
        },
        valueChange(value) {
            console.log(value);
            if (this.addVisible) {
                // value = value[value.length - 1];
                // this.addForm.parentName = value;
                // console.log('上级菜单', this.addForm);
                // var str;
                // var options = Array.from(this.addForm.options);
                // console.log('option:', options);
                // var bool = false;
                // for (var item of options) {
                //   if (item.name == value) {
                //     str = item.id;
                //     break;
                //   } else {
                //     var permissions = Array.from(item.permissions);

                //     for (var child of permissions) {
                //       if (child.name == value) {
                //         str = child.id;
                //         bool = true;
                //         break;
                //       }
                //     }
                //   }
                //   if (bool) {
                //     break;
                //   }
                // }
                // console.log(str);
                // this.addForm.parentId = str;
                this.addForm.parentId = value[value.length - 1];
                // console.log(this.addForm.parentId)
            } else if (this.editVisible) {
                // let value = value[value.length - 1];
                // this.editForm.parentName = value;
                // // console.log(this.getOneArray(value))
                // // console.log(this.editForm.options, this.editForm, value)
                // function myMap (array, name) {
                //   var arr = array.map(item => {
                //     if (item.id === name) {
                //       return item.id;
                //     } else {
                //       if (item.permissions && item.permissions.length) {
                //         return myMap(item.permissions, name);
                //       }
                //     }
                //   });
                //   return arr;
                // }
                // var result = myMap(this.editForm.options, this.getOneArray(value)[0]);
                // console.log(result)
                // var str;
                // function recursion (array) {
                //   for (var item of array) {
                //     if (item === undefined) {
                //       continue;
                //     } else if (item !== undefined && Object.prototype.toString.call(item) === '[object Array]') {
                //       recursion(item);
                //     } else {
                //       str = item;
                //     }
                //   }
                // }
                // recursion(result);
                // console.log(str);
                // this.editForm.parentId = str;
                if (value) {
                    this.editForm.parentId = value[value.length - 1];
                }
                // console.log(this.editForm.parentId)
            }
        },
        async deleteData(url, id, callback) {
            try {
                let { data: res } = await this.$http[4].delete(url, {
                    params: this.$removeField({
                        permissionId: id
                    })
                });
                console.log('dele:', res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                this.$message.success('操作成功');
                callback();
            } catch (err) {
                console.dir(err);
                // this.$message.error({
                //   message: err.message,
                //   duration: 1500
                // });
            }
        },
        handleDelete(row) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.deleteData('/menu/delete', row.id, this.getMenuData);
                })
                .catch(() => {});
        },
        handleRow(index, row) {
            index++;
            if (row.permissions && row.permissions.length > 0) {
                if (row.show) {
                    row.show = false;
                    var length = row.permissions.length;
                    function myMap(array) {
                        array.map(item => {
                            if (item.show) {
                                item.show = false;
                                length += item.permissions.length;
                                return myMap(item.permissions);
                            }
                        });
                    }
                    myMap(row.permissions);
                    this.tableData.splice(index, length);
                } else {
                    row.permissions.forEach(value => {
                        this.tableData.splice(index, 0, value);
                        index++;
                    });
                    row.show = true;
                }
            }
        }
    }
};
</script>
<style lang="scss" lang="scss">
.handle-box {
    margin-bottom: 20px;
}
.container {
    height: 100%;
}
.space {
    width: 20px;
    display: inline-block;
}
.arrow-width {
    width: 14px;
    display: inline-block;
}
</style>
